<template>
  <div class="account-info">
    <div class="my-order">
      <div class="sub-section-title sub-section-title-white">
        <h2 class="sub-section-title-heading">My Orders</h2>
      </div>
      <div class="product-list-form">
        <form>
          <select class="product-sort" style="display: none">
            <option value="default-sorting">Sort by latest</option>
            <option value="popularity">Sort by popoularity</option>
            <option value="lowtohigh">Sort by price: low to high</option>
            <option value="hightolow">Sort by price: high to low</option>
          </select>
          <div class="nice-select product-sort" tabindex="0">
            <span class="current">Sort by latest</span>
            <ul class="list">
              <li data-value="default-sorting" class="option selected">
                Sort by latest
              </li>
              <li data-value="popularity" class="option focus">
                Sort by popoularity
              </li>
              <li data-value="lowtohigh" class="option">
                Sort by price: low to high
              </li>
              <li data-value="hightolow" class="option">
                Sort by price: high to low
              </li>
            </ul>
          </div>
        </form>
      </div>
    </div>
    <div class="cart-table cart-table-white">
      <table>
        <thead>
          <tr>
            <th>Product Thumb</th>
            <th>Product Name</th>
            <th>Total</th>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="product-table-thumb">
                <img
                  src="assets/images/products/product-14.png"
                  alt="product"
                />
              </div>
            </td>
            <td>Comfortable Bed for sale</td>
            <td class="color-secondary">$2200.0</td>
            <td class="cancel">
              <a href="#"><i class="flaticon-close"></i></a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="product-table-thumb">
                <img src="assets/images/products/product-2.png" alt="product" />
              </div>
            </td>
            <td>Stylish Chair</td>
            <td class="color-secondary">$300.0</td>
            <td class="cancel">
              <a href="#"><i class="flaticon-close"></i></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
